<nav class="p-6">
  <div class="text-base breadcrumbs p-4 rounded-md bg-white shadow-md">
    <ul>
      <li><a routerLink="/home">Home</a></li>
      <li><a routerLink="/products">Products</a></li>
    </ul>
  </div>
</nav>

<div class="bg-white">
  <div
    class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8"
  >
    <div class="md:flex md:items-center md:justify-between">
      <h2 class="text-2xl font-bold tracking-tight text-gray-900">
        Trending products
      </h2>
    </div>

    <div
      class="mt-6 grid grid-cols-2 gap-x-4 gap-y-10 sm:gap-x-6 md:grid-cols-4 md:gap-y-0 lg:gap-x-8"
    >
      <div class="group relative" *ngFor="let product of products$ | async">
        <div
          class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80"
        >
          <img
            [src]="product.imgUrl"
            alt="{{ product.name }}"
            class="h-full w-full object-cover object-center"
          />
        </div>
        <h3 class="mt-4 text-sm text-gray-700">
          <a [routerLink]="['/products', product.id]">
            <span class="absolute inset-0"></span>
            {{ product.name }}
          </a>
        </h3>
        <p class="mt-1 text-sm text-gray-500">{{ product.color }}</p>
        <p class="mt-1 text-sm font-medium text-gray-900">
          {{ product.price | currency }}
        </p>
      </div>
    </div>
  </div>
</div>
